import '../../scss/Index.scss';
import '../../scss/Footer.scss';
import { AppstoreAddOutlined , PicRightOutlined , WindowsOutlined , HeartOutlined , ShoppingCartOutlined} from '@ant-design/icons';
import { AliwangwangFilled } from '@ant-design/icons';
import Banner from "./Banner";
import Top from "./Top";
import { index_nav } from "../../tools/api";
import logo from '../views-images/banner.png'
import React, { Component } from 'react';

class Index extends Component {
    state = {
        shopArr:[],
        footerArr:[
            {name:'店铺',pic:<AppstoreAddOutlined />},
            {name:'分类',pic:<PicRightOutlined />},
            {name:'全部商品',pic:<WindowsOutlined />},
            {name:'购物车',pic:<ShoppingCartOutlined />},
            {name:'个人中心',pic:<HeartOutlined />},
        ],
        selectColor:0,
    }
    render() {
        return (
            <>
            <div className='index'>
                <Top></Top>
                <Banner></Banner>
                <div className='jie'>
                    <i><AliwangwangFilled /> </i>&nbsp;&nbsp;<span>1分抵1元。请您点击此处查看 《购物须知》。</span>
                </div>
                <div className="nav">
                   {
                     this.state.shopArr.map((item,index)=>{
                        return (
                        <div className="ce" key={ index }>
                            <div className="top_w">
                                <img src={ item.pic } alt="" />
                            </div>
                            <div className="bottom">
                                { item.name }
                            </div>
                         </div>
                        )
                     })
                   }
                </div>
                <div className='banner_two'>
                    <img src={ logo } alt="" />
                </div>
            </div>
            <div className='footer'>
                {
                    this.state.footerArr.map((item,index) => {
                            return (
                        <div onClick={ () => { this.indexCut( index ) } } className= { `mode  ${ this.state.selectColor == index ? 'active' : '' }` } key={ index }>
                            <div className="cneter" key={ index }>
                            <div className='top'><i> { item.pic } </i></div>
                            <div className='bottom' > { item.name } </div>
                        </div>
                    </div>
                        )
                    })
                }
            </div>
            </>
        );
    }
    
    indexCut = (index) => {
        this.setState({ selectColor:index })
    }
    // 请求商品数据
    componentDidMount() { index_nav().then( response => { this.setState({ shopArr:response.data.list }) } )}}

export default Index;